<template>
  <view v-if="mode !== 'quickly'" class="login">
    <view class="top">
      <server-image class="logo-icon disb" name="logo.png" mode="aspectFill"></server-image>
      <view class="login-title">欢迎使用广州商科</view>
    </view>

    <login-form ref="loginForm" @login-success="loginSuccess"></login-form>

    <view class="botton-warp betweenBox">
      <view class="link" @click="toPage('/pages/login/register?form=login')">账号注册</view>
      <view class="link" @click="toPage('/pages/login/change-psw/change-psw')">
        忘记密码
      </view>
    </view>

    <!-- #ifdef APP-PLUS -->
    <view class="thirdparty-login">
      <view class="title betweenBox">
        <view class="line"></view>
        <view>其他登录方式</view>
        <view class="line"></view>
      </view>
      <view class="mode flex-box">
        <view class="mode-item" @click="wxLogin">
          <server-image class="item-icon disb" name="img20230222001.png" />
          <view class="item-txt">微信</view>
        </view>
      </view>
    </view>
    <!-- #endif -->
  </view>

  <view v-else class="login">
    <view class="top">
      <view class="login-title title-quickly">快速注册账号</view>
    </view>

    <login-form
      ref="loginForm"
      is-quickly
      :auto-id="autoId"
      @login-success="loginSuccess"
    ></login-form>
  </view>
</template>

<script>
import loginForm from '@/components/login/login-form';
import { loginInitStorageAndStore, uniLogin } from '@/common/utils';

export default {
  components: {
    loginForm,
  },
  data() {
    return {
      isFormEnter: false,
      fromDetail: false,
      autoId: undefined,
      mode: 'default',
    };
  },
  onLoad(e) {
    if (e && e.mode) this.mode = e.mode;
    const memberAutoId = uni.getStorageSync('memberAutoId');
    if (memberAutoId && memberAutoId != 'undefined') {
      this.autoId = memberAutoId;
    }
  },
  beforeDestroy() {
    uni.removeStorage({ key: 'memberAutoId' });
  },
  onShow() {
    let that = this;
    uni.getStorage({
      key: 'pagefromDetail',
      success: (res) => {
        that.fromDetail = res.data; //page from product-detail
      },
      fail: () => {
        uni.setStorage({
          key: 'pagefrom',
          data: 'login', //page frome member
        });
      },
    });
    that.isFormEnter = uni.getStorageSync('formEnter');
  },
  destroyed() {
    uni.removeStorageSync('pagefromDetail');
  },
  methods: {
    loginSuccess(data, message) {
      this.showMessage({ title: message || '登录成功', duration: 2000 }).then(() => {
        loginInitStorageAndStore(data, this);
        if (this.isFormEnter) {
          uni.navigateBack({ delta: 2 });
        } else if (this.fromDetail) {
          uni.navigateBack();
        } else {
          uni.switchTab({
            url: '/pages/member/member',
          });
        }
      });
    },
    wxLogin() {
      const that = this;
      that.$refs.loginForm
        .checkAgree()
        .then(() => {
          return uniLogin('weixin').then((code) => {
            const params = { code };
            return that.apiUrl.memberWxAppLgoin({ data: params }).then((res) => {
              const { code, msg:message='', data: rData } = res.data;
              if (code != 0) return Promise.reject(new Error(message));
              const { loginCode, member, openId } = rData;
              if (loginCode == 500) return Promise.reject(new Error('获取openid失败'));
              if (loginCode == 200) that.toPage(`/pages/login/bind-phone?openId=${openId}`);
              if (loginCode == 100) that.loginSuccess(member);
            });
          });
        })
        .catch((e) => {
          that.showMessage({ title: e.message });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  padding-left: 60rpx;
  padding-right: 60rpx;
  position: relative;
  min-height: calc(100vh - 44px);
  //box-sizing: border-box;
}

.top {
  padding-top: 30rpx;
}

.logo-icon {
  width: 180rpx;
  height: 180rpx;
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

.login-title {
  margin-top: 20rpx;
  margin-bottom: 80rpx;
  height: 62rpx;
  font-size: 44rpx;
  color: #333333;
  line-height: 62rpx;
  text-align: center;
}

.botton-warp {
  margin-top: 40rpx;

  .link {
    height: 37rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #696969;
    line-height: 37rpx;
  }
}

.thirdparty-login {
  margin-top: 60rpx;

  .line {
    width: 200rpx;
    height: 1px;
    background: #f1f1f1;
  }

  .title {
    height: 37rpx;
    font-size: 26rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #696969;
    line-height: 37rpx;
  }

  .mode {
    margin-top: 24rpx;
  }

  .item-icon {
    width: 76rpx;
    height: 76rpx;
    display: block;
  }

  .item-txt {
    margin-top: 12rpx;
    height: 30rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Light, PingFang SC;
    font-weight: 300;
    color: #696969;
    line-height: 30rpx;
    text-align: center;
  }
}

.title-quickly {
  text-align: left;
  margin-bottom: 60rpx;
}
</style>
